Referenz · Layout
Section Layouts
Die wiederkehrenden Anordnungen einer Section — vom Feature-Grid bis zum Vollbild. Jede Variante zeigt ihre Klasse und einen langen Demotext, damit sichtbar wird, wie der Fließtext läuft. Alle Spalten werden auf Mobile automatisch einspaltig; Bilder stehen im HTML immer zuerst (gut für Screenreader).
Drei Spalten
Feature-Grid mit Icon, Headline und Text
Klasse .feature-grid mit
.feature-Blöcken. Responsiv 1 → 2 → 3 Spalten; sechs
Einträge ergeben das ruhige 2×3-Raster wie auf der Startseite.
Kein Build-Step
Reines HTML, CSS und JS. Läuft per Doppelklick und auf jedem Server — kein Node, kein Deploy-Ritual, kein Versionschaos.
Alles über Tokens
Drei Markenfarben bilden die Basis. Flächen und Hover-Töne werden daraus abgeleitet, Textkontraste bleiben bewusste Entscheidungen.
Datenschutz mitgedacht
Selbst gehostete Schrift, optionales Consent-Modul mit Prior-Blocking und eine technische Basis fürs Kontaktformular.
A11y mitgedacht
Skip-Link, sichtbarer Fokus, Tastaturbedienung, Reduced Motion und nachgerechnete Kontraste schaffen eine belastbare Basis.
Denkt in Sektionen
Wiederverwendbare Bausteine und neutrale Templates. Neue Seiten entstehen durch Kombinieren, nicht durch Copy-Paste-Chaos.
Geführter KI-Kontext
Klare Rollen für Regeln, Arbeitsweise und Projektentscheidungen machen Kitty maschinenlesbar und eine KI-Session konsistent.
Zwei Spalten
Gleichwertige Spalten
Klasse .cols .cols--2. Zwei gleich
breite Spalten, die sich den Raum teilen.
Dies ist ein zweispaltiges Layout im Verhältnis 50/50. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Beide Spalten sind gleich breit und beginnen oben auf derselben Linie. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi non quam. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Praesent dapibus, neque id cursus faucibus.
Bild & Text
Bild links, Text rechts
Klasse .cols .cols--3070. Schmale
Bildspalte links, breite Textspalte rechts.
Dies ist ein Bild-Text-Layout im Verhältnis 30/70 mit dem Bild links. Das schmale linke Feld eignet sich gut für ein rundes Porträt, eine Auszeichnung oder ein kleines Schlüsselbild. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue.
Bild & Text
Bild rechts, Text links
Klasse .cols .cols--3070 .cols--reverse.
Optisch gespiegelt, im HTML bleibt das Bild zuerst.
Dies ist dasselbe 30/70-Layout, nur mit dem Bild rechts. Die
Klasse .cols--reverse schiebt die schmale Spalte
optisch nach rechts, während sie im Code weiterhin zuerst steht —
gut für die Vorlesereihenfolge. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa.
Haupt- & Nebenspalte
Breiter Text, schmale Nebenspalte
Klasse .cols .cols--7030. Der
Hauptinhalt links, rechts eine schmale Spalte für eine Info-Box.
Dies ist ein zweispaltiges Layout im Verhältnis 70/30. Die breite Spalte trägt den Hauptinhalt, die schmale Nebenspalte nimmt eine Randnotiz, Kennzahl oder einen Hinweis auf. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed.
Vier Spalten
Kompaktes Merkmal-Raster
Klasse .cols .cols--4. Vier schmale
Spalten, responsiv 1 → 2 → 4. Ideal für kurze Merkmale oder Leistungen.
Reduziert
Kurze Texte, oben bündig ausgerichtet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Responsiv
Einspaltig auf Mobile, dann zwei, dann vier Spalten. Suspendisse lectus tortor, dignissim sit amet.
Vielseitig
Passt für Leistungen, Merkmale oder eine knappe Aufzählung. Cras elementum ultrices diam.
Konsistent
Gleiche Klassenlogik wie überall im Kit. Maecenas ligula massa, varius a, semper congue.
Vollbild
Bild über die volle Contentbreite
Klasse .media. Ein Bild über die
gesamte Breite mit festem Seitenverhältnis (Standard 16:9, per
--media-ratio änderbar).
Weiterstöbern
Mehr Referenz
Die einzelnen Bausteine im Detail — oder die Typografie, aus der alles gesetzt ist.